$def with (works_json, authors_json, works_count, owner_key, owner_name, shelf_path, shelf_key, lang='en')

$ shelf_name = unicode(render_template('account/readinglog_shelf_name', shelf_key)).strip();
$var title: $_('"%(shelf_name)s" Stats', shelf_name=shelf_name)

$jsdef render_works_list(works):
    <ul class="works-list">
    $for work in works:
        <li><a href="$work.key" style="font-style:oblique">$work.title</a>
            $ first_publish_year = work.first_publish_year or '????'
            <span title="First published in $first_publish_year">($first_publish_year)</span>
            by
            $for author in work.authors:
                <a href="$author.key">$author.name</a>$cond(not loop.last, ', ', '')
        </li>
    </ul>

$jsdef render_excluded_works_list(works, total):
    <details>
        <summary><meter value="$(total - len(works))" max="$total"></meter> $len(works) works excluded due to missing data</summary>
        $:render_works_list(works)
    </details>

<style>
    canvas { width: 100% !important; object-fit: contain; }

    .charts-flow {
      display: flex;
      flex-wrap: wrap;
      border-top: 1px dotted #aaa;
    }

    section.readinglog-chart-container {
      width: 50%;
      padding: 10px;
      margin: 0;
    }

    details > summary {
      font-size: 0.75em;
    }

    .selected-works {
        position: sticky;
        bottom: 0;
        max-height: 160px;
        background: white;
        border-top: 1px dotted;
        overflow: auto;
    }
    .selected-works summary {
        padding: 5px;
        background: #EEE;
        position: sticky;
        top: 0;
    }
    .selected-works main { padding: 5px 10px 10px 10px; }
    .selected-works--empty { display: none; }
    .selected-works--list:empty+.selected-works--empty {
        display: block;
    }

    /* Hanging indent */
    .works-list > li {
        padding-left: 22px;
        text-indent: -22px;
    }

    @media (min-width: 750px) {
        .readinglog-chart-container:nth-child(2n+1) {
            border-right: 1px dotted #aaa;
        }

        .readinglog-chart-container:nth-child(n) {
            border-bottom: 1px dotted #aaa;
        }
    }
    @media (max-width: 750px) {
        section.readinglog-chart-container {
            width: 100%;
        }

        .readinglog-chart-container {
            border-bottom: 1px dotted #aaa;
        }
    }
</style>

<div id="contentHead">
    <div class="small sansserif grey account-settings-menu">
      <a href="$owner_key">$owner_name</a>
        &raquo; <a href="$shelf_path">$shelf_name</a>
        &raquo; $_('Stats')
    </div>
    <h1>$_('"%(shelf_name)s" Stats', shelf_name=shelf_name)</h1>

    <p>$:_('Displaying stats about <strong>%d</strong> books. Note all charts show only the top 20 bars. Note reading log stats are private.', works_count)</p>
</div>

<div class="readinglog-charts" style="padding: 12px;">

    <h2>$_('Author Stats')</h2>

    <section class="charts-flow">
        $code:
            charts = [
                { 'title': _('Most Read Authors'), 'type': 'work-chart', 'key': 'authors[].name' },
                { 'title': _('Works by Author Sex'), 'type': 'wd-chart', 'key': 'authors[].wd.sexLabel[].value' },
                { 'title': _('Works by Author Ethnicity'), 'type': 'wd-chart', 'key': 'authors[].wd.ethnic_groupLabel[].value' },
                { 'title': _('Works by Author Country of Citizenship'), 'type': 'wd-chart', 'key': 'authors[].wd.country_of_citizenshipLabel[].value' },
                { 'title': _('Works by Author Country of Birth'), 'type': 'wd-chart', 'key': 'authors[].wd.country_of_birthLabel[].value' },
            ]

        $for chart in charts:
            <section class="readinglog-chart-container">
                <h3>$chart['title']</h3>
                <div class="readinglog-stats-chart" data-config="$dumps(chart)"></div>
            </section>
    </section>

    <small>$:_('Demographic statistics powered by <a href="https://www.wikidata.org/">Wikidata</a>. Here\'s a <a id="wd-query-sample" href="">sample</a> of the query used.')</small>

    <h2>$_('Work Stats')</h2>

    <section class="charts-flow">

        $code:
            charts = [
                { 'title': _('Works by Subject'), 'type': 'work-chart', 'key': 'subjects', 'exclude': ['Accessible book', 'Protected DAISY', 'In library', 'Lending library'] },
                { 'title': _('Works by People'), 'type': 'work-chart', 'key': 'subject_people' },
                { 'title': _('Works by Places'), 'type': 'work-chart', 'key': 'subject_places' },
                { 'title': _('Works by Time Period'), 'type': 'work-chart', 'key': 'subject_times' },
            ]

        $for chart in charts:
            <section class="readinglog-chart-container">
                <h3>$chart['title']</h3>
                <div class="readinglog-stats-chart" data-config="$dumps(chart)"></div>
            </section>
    </section>
</div>

<details class="selected-works" open>
    <summary>$_('Matching works')</summary>
    <main>
        <div class="selected-works--list"></div>
        <div class="selected-works--empty">
            $_('Click on a bar to see matching works')
        </div>
    </main>
</details>

<script>
    window.READINGLOG_STATS_CONFIG = {
        works: $:works_json,
        authors: $:authors_json,
        lang: $:dumps(lang),
        charts_selector: '.readinglog-stats-chart',
    };
</script>